<template>
  <div class="classify-statics-container">
    <div style="margin-bottom: 10px" class="card table-box">
      <el-form :inline="true" :model="param" style="padding-top: 20px">
        <el-form-item label="日期：">
          <el-date-picker
            v-model="param.dataTimeRange"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            date-format="YYYY/MM/DD"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
          <el-button :icon="Delete" @click="reset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="display: flex; justify-content: space-between">
      <div style="width: 49.5%">
        <el-card> <ECharts :option="option" :height="350"></ECharts></el-card>
      </div>
      <div style="width: 49.5%">
        <el-card> <ECharts :option="option2" :height="350"></ECharts></el-card>
      </div>
    </div>

    <div style="display: flex; justify-content: space-between; margin-top: 10px">
      <div style="width: 49.5%">
        <el-card style="height: 520px">
          <h3 style="height: 20px; margin-top: -5px; text-align: center">商品大类</h3>
          <el-table :data="bigCategorySummary" style="width: 100%" max-height="430">
            <el-table-column sortable fixed prop="name" label="分类" />
            <el-table-column sortable prop="count" label="数量" />
            <el-table-column sortable prop="amount" label="金额" />
            <el-table-column sortable prop="amountPercent" label="金额占比" />
          </el-table>
        </el-card>
      </div>
      <div style="width: 49.5%; overflow-y: auto">
        <el-card style="height: 520px">
          <h3 style="height: 20px; margin-top: -5px; text-align: center">商品小类</h3>
          <el-table :data="smallCategorySummary" style="width: 100%" max-height="480">
            <el-table-column sortable fixed prop="name" label="分类" />
            <el-table-column sortable prop="count" label="数量" />
            <el-table-column sortable prop="amount" label="金额" />
            <el-table-column sortable prop="amountPercent" label="金额占比" />
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="classifyStatics">
import { ref, reactive, onMounted } from "vue";
import ECharts from "@/components/ECharts/index.vue";
import { Delete, Search } from "@element-plus/icons-vue";
import { GetBusinessDaySummary } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { Reporting } from "@/api/interface";

const option: any = reactive({
  color: [
    "#1890FF",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
    "#913B74",
    "#FA3858",
    "#7330DE",
    "#3C3272",
    "#9A30B4",
    "#ea3ccc"
  ],
  title: {
    text: "商品大类",
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "vertical",
    left: "left"
    // bottom: "bottom"
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: "70%",
      data: [],
      label: {
        normal: {
          show: true,
          formatter: "{b}: {d}%" // 显示名称和百分比
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
});

const option2: any = reactive({
  color: [
    "#1890FF",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
    "#913B74",
    "#FA3858",
    "#7330DE",
    "#3C3272",
    "#9A30B4",
    "#ea3ccc"
  ],
  title: {
    text: "商品小类",
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "vertical",
    left: "left"
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: "70%",
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
});

interface param {
  dataTimeRange: string[];
}

let param = ref<param>({
  dataTimeRange: [formatDate(-1, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")]
});

let bigCategorySummary = ref<any[] | null | undefined>([]);
let smallCategorySummary = ref<any[] | null | undefined>([]);

const GetPageData: () => void = async () => {
  let data: Reporting.BusinessDaySummary;
  data = (await GetBusinessDaySummary(param.value)).data;
  option.series[0].data = data.list.bigCategorySummary;
  option2.series[0].data = data.list.smallCategorySummary;
  bigCategorySummary.value = data.list.bigCategorySummary;
  smallCategorySummary.value = data.list.smallCategorySummary;
};

const search: () => void = async () => {
  await GetPageData();
};

async function reset(): Promise<void> {
  param.value.dataTimeRange = [formatDate(-30, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")];
  await GetPageData();
}

onMounted(async function (): Promise<void> {
  await GetPageData();
});
</script>
